---
layout: example.html
title: Raster Reprojection
shortdesc: Demonstrates client-side raster reprojection between various projections.
docs: >
  This example shows client-side raster reprojection between various projections.
tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid"
---
<div id="map" class="map"></div>
<form class="reprojection-form">
  <label for="base-layer">Base map:</label>
  <select id="base-layer">
    <option value="osm">OSM (EPSG:3857)</option>
    <option value="wms4326">WMS (EPSG:4326)</option>
  </select>

  <label for="overlay-layer">Overlay map:</label>
  <select id="overlay-layer">
    <option value="bng">British National Grid (EPSG:27700)</option>
    <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
    <option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
    <option value="states">United States (EPSG:3857)</option>
  </select>

  <label for="view-projection">View projection:</label>
  <select id="view-projection">
    <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
    <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
    <option value="ESRI:54009">Mollweide (ESRI:54009)</option>
    <option value="EPSG:27700">British National Grid (EPSG:27700)</option>
    <option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
    <option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
    <option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
    <option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
  </select>

  <label for="render-edges">Render reprojection edges:</label>
  <span><input type="checkbox" id="render-edges" /></span>
</form>
